<template>
    <div id="container-login">
        <div id="login-label">
            <table>
                <tr>
                    <td
                        colspan="3"
                        style="
              height: 100px;
              font-size: 30px;
              border-bottom: 2px #5fbdee solid;
            "
                    >
                        <span style="font-weight: bold">用户登录</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; width: 30%; font-weight: bold">
                        用户名:
                    </td>
                    <td>
                        <el-input
                            v-model="username"
                            placeholder="请输入用户名"
                            prefix-icon="el-icon-user-solid"
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td style="text-align: center; font-weight: bold">密码:</td>
                    <td>
                        <el-input
                            v-model="password"
                            placeholder="请输入密码"
                            prefix-icon="el-icon-key"
                            show-password
                        ></el-input>
                    </td>
                    <td style="width: 5%"></td>
                </tr>

                <tr>
                    <td colspan="3" style="border-top: 2px #5fbdee solid">
            <span>
              <el-button type="primary" @click="login">登录</el-button>
            </span>
                        <span style="margin-right: -200px; margin-left: 100px">
              <el-link
                  :underline="false"
                  @click="toRegister"
                  style="color: white"
                  icon="el-icon-edit"
              >注册</el-link
              >
            </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    import "@/assets/css/login.css";

    var md5 = require('js-md5');
    export default {
        data() {
            return {
                username: "",
                password: "",
            };
        },
        methods: {
            login() {
                this.AXIOS.post("/api/login", {
                    username: this.username,
                    password: md5(this.password),
                })
                    .then((res) => {
                        if (res.data.status === 1) {
                            // 设置 cookie
                            this.COOKIE.set('token', res.data.data.token);
                            this.COOKIE.set('is_login', 1);   // 设置过期时间
                            this.COOKIE.set('uid', res.data.data.uid);   // 默认 1 天过去
                            this.COOKIE.set('name', res.data.data.name);   // 默认 1 天过去
                            this.COOKIE.set('role_id', res.data.data.role_id);   // 默认 1 天过去
                            this.$router.push({path: res.data.data.visit_url});
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            },
            toRegister() {
                this.$router.push({path: "/register"});
            },
        },
    };
</script>

<style scoped>
    #container-login {
        background: url("../../assets/img/background_img.png") no-repeat;
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
        text-align: center;
        overflow: hidden;
    }

    #login-label {
        float: left;
        margin-top: 5%;
        margin-left: 35%;
        width: 30%;
        height: 50%;
    }

    #login-label table {
        /* border: 1px red solid; */
        border-radius: 10px;
        /* border: 5px #000 solid; */
        width: 100%;
        text-align: center;
        color: whitesmoke;
        height: 320px;
        padding: 0;
        background: url("../../assets/img/box.png") no-repeat;
        background-size: 100% 320px;
    }
</style>
